<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/easyui/themes/default/easyui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/font-awesome.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/style_index.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/style_table.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}"/>
    <title>学生管理</title>
    <style>
        .display_none {
            display: none;
        }

        .operate a {
            margin: 10px 5px;
        }

        .populationAddressSearch {
            padding: 7px 16px;
        }

        .populationAddressReset {
            padding: 7px 16px;
            float: none;
        }

        .distance {
            margin-right: 20px;
        }

        html {
            overflow: scroll;
            overflow-x: hidden;
        }

        #pagebox {
            float: right;
            height: 28px;
            border-radius: 5px;
            border: 1px solid #dddddd;
            background-color: #fff;
        }

        #pageul {
            width: 100%;
            height: 100%;
        }

        #pageul li {
            display: block;
            float: left;
            height: 100%;
            cursor: pointer;
        }

        #zhuanye {
            float: left;
            line-height: 32px;
        }

        #datanumDiv {
            line-height: 32px;
            float: left;
            padding-right: 5px;
        }

        #datatotalDiv {
            line-height: 32px;
            float: right;
            padding-left: 5px;
        }

        /*前后页*/
        .first, .last {
            width: 35px;
        }

        .first {
            background: url(/images/first-1.png) center;
            border: 0px;
            border-right: 1px solid #dddddd;
            -webkit-transition: 0.7s all;
            -moz-transition: 0.7s all;
            -o-transition: 0.7s all;
            -ms-transition: 0.7s all;
        }

        .first:hover {
            background: url(/images/first-2.png) center
        }

        .last {
            background: url(/images/last-1.png) center;
            -webkit-transition: 0.7s all;
            -moz-transition: 0.7s all;
            -o-transition: 0.7s all;
            -ms-transition: 0.7s all;
        }

        .last:hover {
            background: url(/images/last-2.png) center;
        }

        .pages {
            width: 30px;
            line-height: 28px;
            text-align: center;
            color: #0077d6;
            border: 0px;
            border-right: 1px solid #dddddd;
            -webkit-transition: 0.7s all;
            -moz-transition: 0.7s all;
            -o-transition: 0.7s all;
            -ms-transition: 0.7s all;
        }

        .pages:hover {
            color: #333;
        }

        .on {
            color: #333;
        }

        .pre {
            background: url(/images/pre-1.png) center;
            width: 30px;
            border: 0px;
            border-right: 1px solid #dddddd;
            -webkit-transition: 0.7s all;
            -moz-transition: 0.7s all;
            -o-transition: 0.7s all;
            -ms-transition: 0.7s all;
        }

        .pre:hover {
            background: url(/images/pre-2.png) center;
        }

        .next {
            background: url(/images/next-1.png) center;
            width: 30px;
            border: 0px;
            border-right: 1px solid #dddddd;
            -webkit-transition: 0.7s all;
            -moz-transition: 0.7s all;
            -o-transition: 0.7s all;
            -ms-transition: 0.7s all;
        }

        .next:hover {
            background: url(/images/next-2.png) center;
        }

        .selectCenter {
            margin-top: 4px;
        }

    </style>
</head>
<body style="background:#f7f7f7;">
<div class="checkbox" style="display: flex;padding:5px 15px;">

    <!--内容-->
    <div class="systembox clear user-role-content">
        <div class="role_right" style="overflow-y: auto">
            <div class="heading_name">
                <h3>用户列表：</h3></div>
            <div style="padding:10px 15px;">
                <div class="btn-group role-btn" role="group" aria-label="..." style="width: 100%;">
                    <button id="updateStudent" type="button" onclick="editUser()" class="btn btn-default">修改</button>
                    <button id="parentInfo" type="button" onclick="addUser()" class="btn btn-default">添加</button>
                    <button id="deleteStudent" type="button" class="btn btn-default" onclick="doDelete()">注销</button>
                    <button id="startUsing" type="button" onclick="startUsing()" class="btn btn-default">启用</button>
                    <button id="updatePassword" type="button" onclick="resetPassword()" class="btn btn-default">重置密码
                    </button>
                    <label>
                        <span>用户类型：</span>
                        <select id='userType' name='type' class="type">
                            <option value="" selected>全部</option>
                            <option value="1">管理员</option>
                            <option value="2">教师</option>
                            <option value="3">家长</option>
                            <option value="4">校医</option>
                        </select>
                    </label>
                    <label>
                        <span>用户状态：</span>
                        <select id='userStatus' name='type' class="type">
                            <option value="" selected>全部</option>
                            <option value="1">正常</option>
                            <option value="0">注销</option>
                        </select>
                    </label>
                    <div class="custom-search hidden-sm hidden-xs">
                        <input id="username" type="text" class="search-query" placeholder="请输入用户名 ...">
                        <i id="search" onclick="searchUser()" class="fa fa-search"></i>
                    </div>
                </div>


                <table id="userDataGrid" width="100%" class="system_table role_table">
                    <thead>
                    <tr>
                        <th></th>
                        <th>用户名</th>
                        <th>真实姓名</th>
                        <th>性别</th>
                        <th>电话号码</th>
                        <th>家庭住址</th>
                        <th>用户类型</th>
                        <th>用户状态</th>

                    </tr>
                    </thead>
                    <tbody id="userInfo">
                    </tbody>
                </table>
                <div style="overflow: hidden;">
                    <div id="zhuanye" style="margin-top: 10px;">
                        <div id="datanumDiv">显示</div>
                        <select id="rows" style="float:left;margin-top: 7px;" onchange="refresh()">
                            <option class="xialashu">15</option>
                            <option class="xialashu">30</option>
                            <option class="xialashu">50</option>
                        </select>
                        <div id="datatotalDiv">条记录</div>
                    </div>
                    <!--分页栏start-->
                    <div id="pagebox" style="margin-top: 10px;">
                        <ul id="pageul">
                            <li class="first" id="first" onclick="firstpage()"></li>
                            <li class="pre" id="pre" onclick="prePage()"></li>
                            <li class="pages on" id="page">1</li>
                            <li class="next" id="next" onclick="nextPage()"></li>
                            <li class="last" id="last" onclick="lastpage()"></li>
                            <li class="pages on" style="width:100px">共<span id="count"></span>条数据</li>
                        </ul>
                        <div style="clear:both;"></div>
                    </div>
                    <!--分页栏end-->
                </div>
            </div>
        </div>
    </div>

</div>
</body>
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/plugin/easyui/jquery.easyui.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-paginator.js}"></script>
<script th:src="@{/plugin/layer/layer.js}" src="../static/plugin/layer/layer.js"></script>
<script th:inline="javascript">
    var uid = null;
    var status = null;

    $(function () {

        $(".rukuOnebtm").each(function () {
            var i = $(this);
            var p = i.find("li");
            p.click(function () {
                if (!!$(this).hasClass("select_click")) {
                    $(this).removeClass("select_click");
                } else {
                    $(this).addClass("select_click");
                }
            })
        });
        searchUser(15, 1);
        /*回车键*/
        $(document).keydown(function (e) {
            if (e.keyCode == 13) {
                searchUser(15, 1);
            }
        });
        /*表格单击事件@author SYC*/
        $("#userInfo").on('click', 'tr', function () {
            var $userInfo = $("#userInfo tr");
            /*清除上次选中行的颜色*/
            for (var i = 0; i < $userInfo.length; i++) {
                $($userInfo[i]).css("background-color", "rgb(255,255,255)");
            }
            //选中行的颜色
            $(this).css("background-color", "#4dabff");
            uid = $(this).find("input[name = 'uid']").val();
            if ($(this).find("input[name = 'status']").val() == "启用") {
                status = 1;
            } else {
                status = 0;
            }
            console.log("uid:" + uid);
        });

    });


    //跳转到添加用户页面
    function addUser() {
        var url = "/toAddUser";
        parent.parent.openWindow("添加用户", ['500px', '450px'], url);
    }


    //打开编辑学生会话框
    function editUser() {
        if (uid == "" || uid == null) {
            layer.msg("请选择一条用户数据！", {time: 2000});
        } else{
            sessionStorage.setItem("uid", uid);
            var url = "/toUpdateUser";
            parent.parent.openWindow("修改用户", ['500px', '450px'], url);
        }

    }

    //查询学生方法
    function searchUser(limit, page) {
        uid = null;
        var userType = null;
        var userStatus = null;
        var postData = new Array();
        if (parent.isEmpty(limit) && parent.isEmpty(page)) {
            postData = {
                limit: 15,
                page: 1
            };
        } else {
            postData = {
                limit: limit,
                page: page
            };
        }

        postData.username = $("#username").val();
        postData.status = $("#userStatus").val();
        postData.type = $("#userType").val();
        $.ajax({
            url: "/searchUsers",
            type: "post",
            data: JSON.stringify(postData),
            dataType: "json",
            headers: {'Content-Type': 'application/json'},
            success: function (data) {
                $("#userInfo").empty();
                for (var i = 0; i < data.rows.length; i++) {
                    if (data.rows[i].type === 1) {
                        userType = "管理员";
                    } else if (data.rows[i].type === 2) {
                        userType = "教师";
                    } else if (data.rows[i].type === 3) {
                        userType = "学生家长";
                    } else if (data.rows[i].type === 4) {
                        userType = "校医";
                    } else {
                        userType = "其他";
                    }
                    if (data.rows[i].status === 1) {
                        userStatus = "启用";
                    } else if (data.rows[i].status === 0) {
                        userStatus = "注销";
                    } else {
                        userStatus = "未知";
                    }

                    var node = "<tr><td>"
                        + "<input name = 'uid' class='display_none' value='"
                        + data.rows[i].uid + "'>"
                        + (i + 1) + "</td><td>"
                        + data.rows[i].username + "</td><td>"
                        + data.rows[i].realName + "</td><td>"
                        + data.rows[i].sex + "</td><td>"
                        + data.rows[i].tel + "</td><td>"
                        + data.rows[i].address + "</td><td>"
                        + userType + "</td><td>"
                        + "<input readonly = 'readonly ' style='width:35px;' name = 'status'  value='"
                        + userStatus + "'>" +
                        "</td></tr>";
                    $("#userInfo").append(node);
                }
                $('#count').html(data.total);

            },
            error: function (error) {
                console.log(error);
            }
        });
    }

    //重置密码
    function resetPassword() {
        if (uid == "" || uid == null) {
            layer.msg("请选择一条用户数据！", {time: 2000});
        } else {
            layer.confirm('是否重置该用户密码？', function (r) {
                if (r) {
                    $.ajax({
                        url: "/resetPassword",
                        type: "POST",
                        data: {
                            "uid": uid
                        },
                        dataType: "json",
                        contentType: "application/x-www-form-urlencoded;charset=utf-8",
                        success: function (result) {
                            if (result.msg === 200) {
                                layer.msg("密码重置成功", {time: 1000});
                                searchUser(15, 1);
                            } else {
                                layer.msg("密码重置失败", {time: 1000});
                            }
                        },
                        error: function () {
                            document.getElementById("deleteStudent").onclick = doDelete;
                            layer.msg("系统出错", {time: 1000});
                        }
                    })
                }
            });


        }
    }

    //启用用户方法
    function startUsing() {
        if (uid == "" || uid == null) {
            layer.msg("请选择一条用户数据！", {time: 2000});
        } else {
            if (status == 1) {
                layer.msg("该用户已是启用状态！", {time: 2000});
            } else {
                layer.confirm('确定启用？', function (r) {
                    if (r) {
                        $.ajax({
                            url: "/startUsing",
                            type: "POST",
                            data: {
                                "uid": uid
                            },
                            dataType: "json",
                            contentType: "application/x-www-form-urlencoded;charset=utf-8",
                            success: function (result) {
                                if (result.msg === 200) {
                                    layer.msg("启用成功", {time: 1000});
                                    searchUser(15, 1);
                                } else {
                                    layer.msg("启用失败", {time: 1000});
                                }
                            },
                            error: function () {
                                document.getElementById("deleteStudent").onclick = doDelete;
                                layer.msg("系统出错", {time: 1000});
                            }
                        })
                    }
                });
            }

        }
    }

    //注销用户方法
    function doDelete() {
        if (uid == "" || uid == null) {
            layer.msg("请选择一条用户数据！", {time: 2000});
        } else {
            if (status == 0) {
                layer.msg("该用户已是注销状态！", {time: 2000});
            } else {
                layer.confirm('确定注销？', function (r) {
                    if (r) {
                        $.ajax({
                            url: "/deleteUser",
                            type: "POST",
                            data: {
                                "uid": uid
                            },
                            dataType: "json",
                            contentType: "application/x-www-form-urlencoded;charset=utf-8",
                            success: function (result) {
                                if (result.msg === 200) {
                                    layer.msg("删除成功", {time: 1000});
                                    searchUser(15, 1);
                                } else {
                                    layer.msg("删除失败", {time: 1000});
                                }
                            },
                            error: function () {
                                document.getElementById("deleteStudent").onclick = doDelete;
                                layer.msg("系统出错", {time: 1000});
                            }
                        })
                    }
                });
            }

        }
    }

    function doQuery() {
        $('#page').text(1);
        searchUser(15, 1);
    }


    /**
     * Description:分页  rows:显示条目数  page:当前第几页  count:总条目数
     */
    function nextPage() {
        if (parseInt($('#rows').val()) * ((parseInt($('#page').text())) + 1) - parseInt($('#count').text()) >= parseInt($('#rows').val())) {
            layer.msg("已到最后一页", {time: 1000});
        } else {
            $('#page').text(parseInt($('#page').text()) + 1);
            searchUser($('#rows').val(), $('#page').text());
        }
    }

    function prePage() {
        if (parseInt($('#page').text()) == 1) {
            layer.msg("已到第一页", {time: 1000});
        } else {
            $('#page').text(parseInt($('#page').text()) - 1);
            searchUser($('#rows').val(), $('#page').text());
        }
    }

    function firstpage() {
        if (parseInt($('#page').text()) == 1) {
            layer.msg("已到第一页", {time: 1000});
        } else {
            $('#page').text(1);
            searchUser($('#rows').val(), $('#page').text());
        }
    }

    function lastpage() {
        if (parseInt($('#rows').val()) * ((parseInt($('#page').text())) + 1) - parseInt($('#count').text()) >= parseInt($('#rows').val())) {
            layer.msg("已到最后一页", {time: 1000});
        } else {
            $('#page').text(Math.ceil(parseInt($('#count').text()) / parseInt($('#rows').val())));
            searchUser($('#rows').val(), $('#page').text());
        }
    }

    function refresh() {
        $('#page').text(1);
        searchUser($('#rows').val(), 1);
    }


    $(document).ready(function () {
        var height = $(window).height() - 40;
        $(".checkbox").height(height);
    })

</script>
</html>
